<template>
    <div class="header-container">
        <div class="header-left">
            <icon-svg class="shrink" name="shrink" @click="shrinkMenu()"></icon-svg>
            <el-breadcrumb class="ml-20" :separator-icon="ArrowRight">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item v-for="bread in breads">{{ bread }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="header-right">
            <img class="w-40 h-40" src="_/assets/imgs/avatar.png" alt="" />
            <el-dropdown>
                <span class="el-dropdown-link">
                    <div class="user-info">{{ nickName }}</div>
                </span>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item @click="updatePwd()">修改密码</el-dropdown-item>
                        <el-dropdown-item @click="logout()">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown>

        </div>
    </div>
</template>
<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { computed, onMounted, Ref, ref, watch } from 'vue';
import useApp from '_/store/app';

const appStore = useApp()
const shrinkMenu = () => {
    appStore.menuCollapse = !appStore.menuCollapse
}

const nickName = computed(() => appStore.userInfo.nickName)

const breads: Ref<string[]> = ref([])
const setBreads = (menus, routeName) => {
    for (let menu of menus) {
        if (routeName.includes(menu.fullname)) {
            breads.value.push(menu.meta.title)
            if (menu.children) {
                setBreads(menu.children, routeName)
            } else {
                // 如果menu菜单中已经是叶子节点，但是叶子name不等于当前路由name 需要补充面包屑
                if (routeName !== menu.fullname) {
                    breads.value.push($route.meta.title)
                }
            }
            break
        }
    }
}

const getDefaultActive = (menus, routeName) => {
    for (let menu of menus) {
        if (routeName.includes(menu.fullname)) {
            if (menu.children) {
                getDefaultActive(menu.children, routeName)
            } else {
                // 如果menu菜单中已经是叶子节点，但是叶子name不等于当前路由name 需要补充面包屑
                appStore.defaultActive = menu.fullpath
            }
            break
        }
    }
}

const updatePwd = () => { }

const logout = () => { }

onMounted(() => {
    const storeMenus = appStore.routers
    setBreads(storeMenus, $route.name)
    getDefaultActive(storeMenus, $route.name)
    watch(() => $route.name, (newVal) => {
        breads.value = []
        setBreads(storeMenus, newVal)
        getDefaultActive(storeMenus, newVal)
    })
})

</script>
<style lang="scss" scoped>
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;

    .header-left {
        display: flex;
        align-items: center;

        .shrink {
            font-size: 20px;
            cursor: pointer;
        }
    }

    .header-right {
        display: flex;
        align-items: center;
        gap: 20px;

        .user-info {
            font-size: 16px;
            cursor: pointer;
        }
    }
}
</style>
<style lang="scss">
.el-dropdown:focus-visible {
    outline: none;
}

.el-dropdown-link:focus-visible {
    outline: none;
}
</style>